<template>
  <view class="container">
    <u-navbar placeholder title="景点" leftIcon="" v-if="showHeader" :titleStyle="{color:'#FFF'}" bgColor="#0ea5e9" height="50px" />
    <!-- 头部搜索区域 -->
    <view>
      <div class="header">
        <u-search placeholder="搜索景点" v-model="listQuery.keyword" @search="handleSearch" @change="handleSearch"></u-search>
        <view class="filter-btn" @click="showFilter">
          <u-icon name="list" color="#0ea5e9" size="20"></u-icon>
        </view>
      </div>
    </view>

    <!-- 景点列表 -->
    <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :fixed="false">
      <view class="scenic-list">
        <view class="scenic-card" v-for="(item, index) in list" :key="index">
          <!-- 景点图片区域 -->
          <view class="card-image">
            <u-image :src="item.face" width="100%" height="360rpx" @click="handleShowImage(item)" border-radius="24rpx 24rpx 0 0" :fade="true"
              :loading="true" mode="aspectFill"></u-image>

            <!-- 收藏按钮 -->
            <view class="collect-btn" @click.stop="toggleCollect(item, index)">
              <u-icon :name="item.isCollected ? 'heart-fill' : 'heart'" :color="item.isCollected ? '#ef4444' : '#ffffff'" size="20"></u-icon>
            </view>
            <!-- 价格标签 -->
            <view class="price-tag" v-if="item.price > 0">
              <text class="price-symbol">¥</text>
              <text class="price-value">{{ item.price }}</text>
              <text class="price-unit">/人</text>
            </view>
            <view class="price-tag free-tag" v-else>
              <text class="free-text">免费</text>
            </view>
          </view>

          <!-- 景点信息区域 -->
          <view class="card-content">
            <!-- 标题和评分 -->
            <view class="item-header">
              <text class="item-title">{{ item.name }}</text>
              <view class="item-rating">
                <u-rate :value="item.rating" :count="5" :size="14" active-color="#fbbf24" inactive-color="#e5e7eb" :readonly="true"></u-rate>
                <text class="rating-text">{{ item.rating }}</text>
              </view>
            </view>

            <!-- 位置信息 -->
            <view class="item-location">
              <u-icon name="map" color="#64748b" size="14"></u-icon>
              <text class="location-text">{{ item.address }}</text>
            </view>

            <!-- 标签 -->
            <view class="item-tags">
              <u-tag v-for="tag in JSON.parse(item.tagsJson)" :key="tag" :text="tag" plain bg-color="#e0f2fe" color="#0369a1"
                border-color="transparent" size="mini" shape="circle" :custom-style="{ marginRight: '12rpx', marginBottom: '12rpx' }"></u-tag>
            </view>

            <!-- 描述 -->
            <view class="item-description">
              <text class="description-text">{{ item.description }}</text>
            </view>

            <!-- 底部信息 -->
            <view class="item-footer">
              <view class="visitor-info">
                <u-icon name="account" color="#64748b" size="14"></u-icon>
                <text class="visitor-text">{{ item.visitors }}人已游览</text>
              </view>
              <u-button type="primary" size="mini" shape="circle" :custom-style="bookBtnStyle" @click="handleNavDetail(item)">
                查看详情
              </u-button>
            </view>
          </view>
        </view>
      </view>
    </mescroll-body>

    <!-- 筛选弹窗 -->
    <u-popup :show="showFilterModal" mode="bottom" border-radius="32" :safe-area-inset-bottom="true">
      <view class="filter-content">
        <view class="filter-header">
          <text class="filter-title">筛选条件</text>
          <u-icon name="close" color="#94a3b8" size="20" @click="hideFilter"></u-icon>
        </view>

        <view class="filter-body">
          <!-- 价格筛选 -->
          <view class="filter-section">
            <text class="section-title">价格范围</text>
            <view class="filter-options">
              <u-tag v-for="price in priceOptions" :key="price" :text="price" :type="selectedPrice === price ? 'primary' : 'info'"
                :plain="selectedPrice !== price" shape="circle" @click="handlePriceSelect(price)"></u-tag>
            </view>
          </view>

          <!-- 景点类型 -->
          <view class="filter-section">
            <text class="section-title">景点类型</text>
            <view class="filter-options">
              <u-tag v-for="type in typeOptions" :key="type" :text="type" :type="selectedType === type ? 'primary' : 'info'"
                :plain="selectedType !== type" shape="circle" @click="handleTypeSelect(type)"></u-tag>
            </view>
          </view>
        </view>

        <view class="filter-footer">
          <u-button type="info" :plain="true" shape="circle" :custom-style="resetBtnStyle" @click="resetFilter">
            重置
          </u-button>
          <u-button type="primary" shape="circle" :custom-style="confirmBtnStyle" @click="confirmFilter">
            确定
          </u-button>
        </view>
      </view>
    </u-popup>

    <!-- 提示组件 -->
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  import MescrollMixin from "@/libs/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

  import userAgent from '@/utils/userAgent'

  export default {
    mixins: [MescrollMixin],
    data() {
      let showHeader = !userAgent.isAppWebKit();

      return {
        showHeader,
        mescroll: null,
        downOption: {
          use: true,
          auto: true
        },
        upOption: {
          page: {
            num: 0,
            size: 20,
            time: null
          },
          empty: {
            use: true,
            icon: null,
            tip: "暂无数据",
            fixed: false,
            top: "560rpx",
          },
          textNoMore: '没有更多数据',
          toTop: {
            duration: 300,
            supportTap: false,
            btnClick: null
          }
        },
        listQuery: {
          page: 1,
          pageSize: 20,
          keyword: ''
        },
        list: [],
        showFilterModal: false,
        selectedType: '',
        selectedPrice: '',
        // 筛选选项
        priceOptions: ['免费', '50元以下', '50-100元', '100-200元', '200元以上'],
        typeOptions: ['山水', '古镇', '寺庙', '公园', '博物馆', '游乐园'],

        // 按钮样式
        bookBtnStyle: {
          background: 'linear-gradient(135deg, #0ea5e9, #06b6d4)',
          border: 'none',
          fontSize: '24rpx',
          height: '56rpx'
        },
        resetBtnStyle: {
          flex: '1',
          marginRight: '24rpx'
        },
        confirmBtnStyle: {
          flex: '1',
          background: 'linear-gradient(135deg, #0ea5e9, #06b6d4)',
          border: 'none'
        }
      }
    },
    methods: {
      mescrollInit(mescroll) {
        // mescroll初始化
        this.mescroll = mescroll
      },
      upCallback(options) {
        this.listQuery.page = options.num
        this.listQuery.pageSize = options.size
        // console.log(`正在加载${options.num}页数据`)
        this.fetchData()
      },
      downCallback() {
        this.listQuery.page = 1
        if (this.mescroll.optUp.use) {
          this.mescroll.resetUpScroll()
        } else {
          setTimeout(() => {
            this.mescroll.endSuccess()
          }, 500)
        }
      },
      fetchData() {
        uni.$u.http.get('/api/scene/list', { params: this.listQuery }).then(response => {
          let { code, message, result } = response.data
          if (code != 200) {
            this.mescroll.endErr(message)
            this.$u.toast(message)
            return
          }
          let { items, page, total, totalPages } = result
          if (result.page == 1) {
            this.list = new Array()
          }
          for (let item of items) {
            if (item.imageUrls) {
              let imgs = JSON.parse(item.imageUrls)
              item.face = imgs[0]
            }
            this.list.push(item)
          }
          // console.log(items)
          this.mescroll.endSuccess(items.length, page < totalPages)
        }).catch(err => {
          console.error('获取招聘信息失败:', err)
          this.mescroll.endErr()
        })
      },
      handleShowImage(item) {
        if (!item.imageUrls) {
          return
        }
        let imgs = JSON.parse(item.imageUrls)
        uni.previewImage({
          urls: imgs
        })
      },
      handleSearch() {
        // 搜索
        // console.log('搜索关键词:', this.keyword)
        this.mescroll.resetUpScroll()
      },
      handleNavDetail(item) {
        this.$u.route({
          url: '/pages/scene/detail',
          params: {
            id: item.id
          }
        })
      },
      handleCategoryChange(obj, index) {
        // 分类切换
        this.currentCategory = index
        this.mescroll.resetUpScroll()
      },
      showFilter() {

        // 显示筛选
        this.showFilterModal = true
      },

      hideFilter() {
        // 隐藏筛选
        this.showFilterModal = false
      },

      handlePriceSelect(price) {
        // 价格选择
        this.selectedPrice = this.selectedPrice === price ? '' : price
      },

      handleTypeSelect(type) {
        // 类型选择
        this.selectedType = this.selectedType === type ? '' : type
      },

      resetFilter() {
        // 重置筛选
        this.selectedPrice = ''
        this.selectedType = ''
      },

      confirmFilter() {
        // 确认筛选
        console.log('筛选条件:', {
          price: this.selectedPrice,
          type: this.selectedType
        })
        this.hideFilter()
        this.mescroll.resetUpScroll()
      },

      toggleCollect(item, index) {
        // 收藏/取消收藏
        this.list[index].isCollected = !this.list[index].isCollected
        const action = this.list[index].isCollected ? '收藏' : '取消收藏'
        this.$refs.uToast.show({
          message: `${action}成功`,
          type: 'success'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    min-height: 100vh;
    background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
  }

  .header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 24rpx;
    display: flex;
    align-items: center;
    gap: 20rpx;
    overflow: hidden;
    border-bottom: 1rpx solid #f0f0f0;

    .filter-btn {
      width: 72rpx;
      height: 72rpx;
      background: #e0f2fe;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;

      &:active {
        transform: scale(0.95);
        background: #bae6fd;
      }
    }
  }

  .scenic-list {
    padding: 10rpx 32rpx;
  }

  .scenic-card {
    background: white;
    border-radius: 24rpx;
    margin-bottom: 32rpx;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
    border: 1rpx solid #f1f5f9;
    overflow: hidden;
    transition: all 0.3s ease;

    &:active {
      transform: translateY(4rpx);
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.12);
    }
  }

  .card-image {
    position: relative;

    .collect-btn {
      position: absolute;
      top: 24rpx;
      right: 24rpx;
      width: 64rpx;
      height: 64rpx;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(10rpx);
      transition: all 0.3s ease;

      &:active {
        transform: scale(0.9);
      }
    }

    .price-tag {
      position: absolute;
      bottom: 24rpx;
      left: 24rpx;
      background: linear-gradient(135deg, #059669, #10b981);
      color: white;
      padding: 12rpx 20rpx;
      border-radius: 20rpx;
      display: flex;
      align-items: baseline;
      box-shadow: 0 4rpx 12rpx rgba(5, 150, 105, 0.3);

      &.free-tag {
        background: linear-gradient(135deg, #f59e0b, #f97316);
        box-shadow: 0 4rpx 12rpx rgba(245, 158, 11, 0.3);
      }

      .price-symbol {
        font-size: 20rpx;
        margin-right: 4rpx;
      }

      .price-value {
        font-size: 28rpx;
        font-weight: 600;
      }

      .price-unit {
        font-size: 20rpx;
        margin-left: 4rpx;
      }

      .free-text {
        font-size: 24rpx;
        font-weight: 600;
      }
    }
  }

  .card-content {
    padding: 32rpx;
  }

  .item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20rpx;

    .item-title {
      flex: 1;
      font-size: 34rpx;
      font-weight: 600;
      color: #1e293b;
      margin-right: 16rpx;
      line-height: 1.3;
    }

    .item-rating {
      display: flex;
      align-items: center;
      gap: 8rpx;
      flex-shrink: 0;

      .rating-text {
        font-size: 24rpx;
        color: #64748b;
        font-weight: 500;
      }
    }
  }

  .item-location {
    display: flex;
    align-items: center;
    gap: 8rpx;
    margin-bottom: 24rpx;

    .location-text {
      font-size: 26rpx;
      color: #64748b;
    }
  }

  .item-tags {
    margin-bottom: 24rpx;
    display: flex;
    flex-wrap: wrap;
  }

  .item-description {
    margin-bottom: 32rpx;

    .description-text {
      font-size: 28rpx;
      color: #475569;
      line-height: 1.6;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }

  .item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .visitor-info {
      display: flex;
      align-items: center;
      gap: 8rpx;

      .visitor-text {
        font-size: 24rpx;
        width: 200upx;
        color: #64748b;
      }
    }
  }

  .filter-content {
    .filter-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32rpx;
      border-bottom: 1rpx solid #f1f5f9;

      .filter-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #1e293b;
      }
    }

    .filter-body {
      padding: 32rpx;
      max-height: 60vh;
      overflow-y: auto;

      .filter-section {
        margin-bottom: 48rpx;

        .section-title {
          display: block;
          font-size: 28rpx;
          font-weight: 600;
          color: #1e293b;
          margin-bottom: 24rpx;
        }

        .filter-options {
          display: flex;
          flex-wrap: wrap;
          gap: 10upx;
        }
      }
    }

    .filter-footer {
      display: flex;
      gap: 24rpx;
      padding: 32rpx;
      border-top: 1rpx solid #f1f5f9;
    }
  }
</style>